<template>
  <div class="article-container">
    <div
      class="article-header"
      :style="
        this.articleData.article_pic == '' ||
        this.articleData.article_pic == null
          ? {
              'background-image':
                'url(' + require('@/assets/images/1665847631227.jpeg') + ')',
            }
          : articleCover
      "
    >
      <div class="article-header-title">
        {{ articleData.article_title }}
      </div>
      <div class="article-header-time">
        <i class="el-icon-date"></i> 发表于 {{ createdTime }}
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon-alarm-clock"></i> 更新于{{ updatedTime }}
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon-files"></i> {{ articleData.name }}
      </div>
      <div class="article-header-info">
        <i class="el-icon-view"></i> 阅读量: {{ articleData.article_views }}
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon-chat-line-round"></i> 评论数:
        {{ articleData.comment }}
      </div>
    </div>
    <div class="article-main">
      <div class="article-main-center">
        <div
          :class="[
            'article-main-left',
            clientWidth < 1180 ? 'main-left-flex' : '',
          ]"
        >
          <el-card>
            <article
              class="article-content markdown-body"
              v-html="articleData.article_html"
            >
              {{ articleData.article_html }}
            </article>
            <div class="article-reward" @click="handlePraise">
              <i v-show="!isPraise" class="iconfont icon-dianzan"></i>
              <i
                v-show="isPraise"
                class="iconfont icon-dianzan_kuai"
                style="color: #ffd700"
              ></i>
              <span>点赞 {{ articleData.article_praise }}</span>
            </div>
            <div class="recommend" v-if="articleList.length != 0">
              <div class="article-title">
                <i class="iconfont icon-dianzan"></i>
                <span>相关推荐</span>
              </div>
              <div class="articleList">
                <div
                  class="article_item"
                  v-for="item of articleList"
                  :key="item.id"
                >
                  <router-link
                    class="router-link"
                    :to="'/home/article/details/' + item.id"
                  >
                    <img
                      :src="
                        item.article_pic
                          ? baseUrl + item.article_pic
                          : '/1665847631227.jpeg'
                      "
                      alt=""
                    />
                    <div class="recommend-info">
                      <div class="re-date">
                        <i class="el-icon-date"></i>
                        {{ item.article_updatedTime }}
                      </div>
                      <div>
                        {{ item.article_title }}
                      </div>
                    </div>
                  </router-link>
                </div>
              </div>
            </div>
            <hr
              style="
                margin: 40px 0;
                border: none;
                border-top: 4px dashed #d2ebfd;
              "
            />
            <!-- 评论 -->
            <div class="article-comment">
              <div
                style="
                  text-align: left;
                  font-size: 22px;
                  font-weight: 700;
                  margin-bottom: 20px;
                "
              >
                <span class="iconfont icon-pinglun1" style="font-size: 22px">
                  &nbsp;评论</span
                >
              </div>
              <div class="comment-main">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8 }"
                  placeholder="留下点什么吧..."
                  v-model="textarea"
                ></el-input
                ><br />
                <el-button type="primary" size="mini" style="margin-right: 20px"
                  >提交</el-button
                >
              </div>
              <div
                style="
                  text-align: left;
                  font-size: 22px;
                  font-weight: 700;
                  margin: 30px 0 20px 0;
                "
              >
                <span style="font-size: 22px">
                  {{ articleData.views }}&nbsp;评论</span
                >
              </div>
              <div class="list-comment">
                <div class="list-comment-left">头像</div>
                <div class="list-comment-right">
                  <div class="comment-nickname">001号选手</div>
                  <div class="comment-created-time">{{ createdTime }}</div>
                  <div class="comment-info">666</div>
                </div>
              </div>
            </div></el-card
          >
        </div>
        <div
          v-if="clientWidth > 1180"
          :class="['article-main-right', isFixTab ? 'fixedNavbar' : '']"
        >
          <el-card>
            <div
              style="
                height: 33px;
                text-align: left;
                font-size: 18px;
                font-weight: 600;
                line-height: 33px;
              "
            >
              <i
                class="iconfont icon-hot"
                style="font-size: 20px; color: #ffd700"
              ></i>
              最热文章
            </div>
            <div class="article-main-right-hot">
              <div class="hot-info" v-for="item in articlesData" :key="item.id">
                <router-link
                  :to="'/home/article/details/' + item.id"
                  class="hot-pic"
                >
                  <img
                    :src="
                      item.article_pic
                        ? baseUrl + item.article_pic
                        : '/1665847631227.jpeg'
                    "
                    alt=""
                  />
                </router-link>
                <div class="hot-right">
                  <router-link
                    :to="'/home/article/details/' + item.id"
                    class="hot-title"
                    >{{ item.article_title }}</router-link
                  >
                  <div class="hot-time">{{ item.article_updatedTime }}</div>
                </div>
              </div>
            </div></el-card
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Details",
  data() {
    return {
      articleData: {},
      articlesData: [],
      articleList: [], //文章推荐
      baseUrl: "http://127.0.0.1:3000/",
      createdTime: "",
      updatedTime: "",
      //评论文本域的内容
      textarea: "",
      clientWidth: null,
      scrollTop: 0,
      isFixTab: false,
      isPraise: false,
    };
  },
  created() {
    this.getArticle();
    this.getRecommend();
    this.getArticles();
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);

    //页面跳转后，重置滚动条的距离为（0，0）
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
    this.handleScroll();

    /* 项目启动后，窗口变化时 获取可视窗口的大小，这里我们只需要高度 */
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.documentElement.clientWidth; //实时宽度
        // window.screenHeight = document.documentElement.clientHeight; //实时高度
        that.screenWidth = window.screenWidth;
        //可视窗口宽度
        this.clientWidth = that.screenWidth;
      })();
    };
  },
  methods: {
    //获取单个文章数据
    getArticle() {
      // 获取跳转路径中的参数
      const id = this.$route.params.id;
      this.$http.get(`/article/getSingleArt/${id}`).then((res) => {
        if (res.code == 0) {
          this.articleData = res.result;
          this.createdTime = this.sliceTime(
            this.articleData.article_createdTime
          );
          this.updatedTime = this.sliceTime(
            this.articleData.article_updatedTime
          );
        }
      });
    },
    // 获取推荐文章
    getRecommend() {
      const id = this.$route.params.id;
      this.$http.get(`/article/getRecommend/${id}`).then((res) => {
        if (res.code == 0) {
          this.articleList = res.result;

          this.articleList.forEach((item) => {
            item.article_updatedTime = this.sliceTime(item.article_updatedTime);
          });
        }
      });
    },
    //获取最热文章
    getArticles() {
      this.$http.get("/article/getHotArticle").then((res) => {
        if (res.code == 0) {
          res.result.forEach((item) => {
            item.article_updatedTime = this.sliceTime(item.article_updatedTime);
          });
          this.articlesData = res.result;
        }
      });
    },
    //截取时间（年-月-日）
    sliceTime(s) {
      return s.substr(0, s.indexOf(" ") + 1);
    },
    //获取滚动距离
    handleScroll() {
      this.clientWidth = document.documentElement.clientWidth;
      this.scrollTop = document.documentElement.scrollTop;
      if (this.scrollTop) {
        if (this.scrollTop >= 400) {
          this.isFixTab = true;
        } else {
          this.isFixTab = false;
        }
      }
    },
    // 点赞回调函数
    handlePraise() {
      const token = localStorage.getItem("token");
      if (token) {
        if (this.isPraise) {
          this.isPraise = false;
          this.articleData.article_praise--;
        } else {
          this.isPraise = true;
          this.articleData.article_praise++;
        }
      } else {
        this.$message.warning("请先登录!");
      }
    },
  },
  computed: {
    articleCover() {
      return (
        "background: url(" +
        this.baseUrl +
        this.articleData.article_pic +
        ") center center / cover no-repeat"
      );
    },
  },
};
</script>
<style scoped>
@import "http://at.alicdn.com/t/c/font_3660400_svekxwsuda.css";
</style>
<style lang="stylus" scoped>
.article-container
  width calc(100vw - 17px)
  overflow hidden
  .article-header
    height 400px
    background-position: center center
    background-repeat: no-repeat
    background-size 100% 100%;
    display flex
    flex-direction column
    justify-content center
    align-items center
    color white
    .article-header-title
      font-size 35px
      padding-bottom 20px
      margin-top: 34px
    .article-header-time
      font-size:14px
      padding-bottom 15px
    .article-header-info
      font-size:14px
  .article-main
    width 100%
    min-height 100vh
    background: -webkit-linear-gradient(left,rgb(254, 244, 234), rgb(219, 234, 234))
    .article-main-center
      width 1180px
      min-height 200px
      margin 0 auto
      text-align center
      display flex
      justify-content space-between
      padding-top 20px
      .article-main-left
        width 887px
        min-height 100%
        &.main-left-flex
          flex 1
        .el-card
          border-radius 15px
          .article-content
            padding:50px 40px
            text-align:left
            word-break: break-word
            font-size: 14px
            line-height: 2
          .article-reward
            margin: 20px auto
            display: flex
            width: 100px
            height: 36px
            justify-content: center
            align-items: center
            background:#49b1f5
            font-size:14px
            color:#fff
            cursor: pointer
            span
              margin-left: 5px
          .recommend
            .article-title
              width: 120px
              height: 40px
              line-height:40px
              text-align: center
              font-weight:700
              font-size:20px
              margin-bottom: 10px
              .iconfont
                color: #4c4948
                font-size:20px
                margin-right:5px
            .articleList
              display: flex
              flex-direction: row
              justify-content: space-between
              // align-items:flex-start
              // flex-wrap: wrap
              // align-content: space-between
              .article_item
                position: relative;
                flex:1
                // display: inline-block;
                overflow: hidden;
                margin: 3px;
                // width: calc(33.333% - 6px);
                height: 200px;
                background: #000;
                vertical-align: bottom;
                transition: all 0.5s
                &:hover img
                  opacity :0.6
                  transform: scale(1.1)
                .router-link
                  display:block
                  width: 100%
                  height: 200px
                  img
                    width: 100%
                    height:200px
                    transition: all 0.6s
                  .recommend-info
                    color: #fff
                    position:absolute
                    top:50%
                    left: 50%
                    transform: translate(-50%,-50%)
                    padding:0 20px
                    width:100%
                    text-align:center
                    font-size:14px
                    .re-date
                      margin: 10px auto
                      font-size:13px
          &:hover
            box-shadow 0 0 20px 10px #ccc
          .article-comment
            .comment-main
              position relative
              border 1px solid #dddedf
              border-radius 5px
              //评论框样式修改
              & ::v-deep .el-textarea__inner
                border: 0;
                resize: none;
            .el-button
              position absolute
              right -10px
              bottom 10px
            .list-comment
              display flex
              .list-comment-left
                width 40px
                height 40px
                line-height 40px
              .list-comment-right
                flex 1
                text-align left
                padding-left 20px
                .comment-nickname
                  height 24px
                  font-size 14px
                .comment-created-time
                  height 16px
                  font-size 10px
                .comment-info
                  padding 15px 0 20px 0
                  height 34px
                  font-size 16px
      .article-main-right
        width 280px
        .el-card
          border-radius 15px
          height 500px
          &:hover
            box-shadow 0 0 20px 10px #ccc
          .article-main-right-hot
            height 430px
            display flex
            flex-direction column
            justify-content space-evenly
            .hot-info
              height 20%
              display flex
              justify-content space-between
              align-items: center
              width 100%
              padding 10px
              font-size 14px
              .hot-pic
                display: block
                width: 58.8px
                height: 58.8px
                overflow: hidden
                background: #000
                &:hover img
                  transform: scale(1.2)
                  opacity: 0.7
                img
                  width: 100%
                  height: 100%
                  transition:all 0.6s
              .hot-right
                .hot-title
                  display: inline-block
                  text-decoration: none
                  text-align: left
                  width: 166px
                  line-height:18px
                  font-size:14px
                  color: #4c4948
                  transition:all 0.3s
                  &:hover
                    color:#2ba1d1
                .hot-time
                  text-align: left
                  font-size:12px
                  color:#858585
                  padding-top:5px
</style>
